<template>
    <view class="detail">
        <SRV-topbar title="商品详情" messageNum='0' isLeft='true'></SRV-topbar>
        <uni-swiper-dot :info="info.covers" :dotsStyles="dotsStyles" :current="current" field="content" :mode="mode">
            <swiper class="swiper-box" @change="change" interval="3000" duration="500" circular="true" autoplay="true">
                <swiper-item v-for="(item, index) in info.covers" :key="index">
                    <view class="swiper-item">
                        <image :src="item.imgUrl" mode="aspectFill">
                        </image>
                    </view>
                </swiper-item>
            </swiper>
        </uni-swiper-dot>
        <view class="info">
            <view class="top">
                <view class="pic">
                    <text>{{info.memberRoleName}}：￥{{info.minPrice + (info.minPrice != info.maxPrice ? ' - ' + info.maxPrice : '')}}</text>
                    <text v-if="info.marketMinPrice > 0">市场价：￥{{info.marketMinPrice + (info.marketMinPrice != info.marketMaxPrice ? ' - ' + info.marketMaxPrice : '')}}</text>
                </view>
                <view class="title">
                    <view>
                        <text v-if="info.reductionName != ''" @click="showReduction()" class="state" style="background:rgba(235, 89, 56, 1);">{{info.reductionName}}{{info.isReduction == 1 ? '满减' : ''}}</text>
                        {{info.name}}
                    </view>
                </view>
            </view>
            <view class="num">
                <text class="num_2" style="width: 100%;text-align: right;">品牌 {{info.brand_name}}</text>
            </view>
            <view class="num">
                <text>销量 {{info.sales}}</text>
                <text>库存 {{info.stock}}</text>
            </view>
        </view>
        <view class="content">
            <view class="titleA">    -----    商品详情    ----    </view>
            <view class="details" v-html="info.intro"></view>
        </view>
		
        <view class="bottom" :style="'height:' + bottomHeight + 'rpx;'">
            <view class="right" style="width:100%;">
                <view class="pay" @click="editSubType('addOrder')"  v-if="info.isBuyer == 1 && info.buyerState == 1" style="width:100%;">立即购买</view>
                <view class="selling" v-if="info.isBuyer == 0 || info.buyerState > 1">{{info.isBuyer == 0 ? "已售馨" : (info.buyerState == 2 ? "即将上新" : "已售馨")}}</view>
            </view>
        </view>
        <uni-popup ref="popup" type="bottom">
            <view class="popup">
                <image @click="close()" class="close" src="http://app.chinasrv.com/attachment/xcx/icon/close.png" mode="aspectFill"></image>
                <view class="goods_info">
                    <image :src="selAttr.picture" mode="aspectFill"></image>
                    <view class="right">
                        <view class="goods_price active">
                            <text>{{info.memberRoleName}}：￥{{selAttr.judgePrice}}</text>
                        </view>
                        <view class="goods_price">
                            <text>市场价：￥{{selAttr.marketPrice}}</text>
                        </view>
                        <view class="goods_price" v-if="false">
                            <text>总价：￥{{selAttr.totalMoney}}</text>
                        </view>
                    </view>
                </view>
                
                <view class="goods_num">
                    <view style="width:50%">销量：{{info.sales}}</view>
                    <view style="width:50%">库存：{{selAttr.stock}}</view>
                    <view style="width:100%;display: flex;align-items: center;flex-wrap: wrap;margin-top: 10rpx;justify-content: space-between;" v-if="(selAttr.nowBenefits != 0 || selAttr.nowSubsidy != 0)">
                        <view class="czType">T{{selAttr.czType}}</view>
                        <view>{{selAttr.nowBenefits != 0 ? selAttr.nowBenefits : ""}} {{selAttr.nowBenefits != 0 && selAttr.nowSubsidy != 0 ? "+" : ""}} {{selAttr.nowSubsidy != 0 ? selAttr.nowSubsidy : ""}}</view>
                        <view>{{selAttr.endDate}}</view>
                    </view>
                </view>
                <scroll-view class="scroll" scroll-y="true" show-scrollbar="false">
                    <view class="goods_size">
                        <text class="title">规格</text>
                        <view class="size_item">
                            <text :class="selAttr.id == item.id ? 'sel' : 'nosel' " v-for="(item,index) in info.sku"
                                :key="index" @click="selAttrFun(index)" 
                                :style="(noStockList.indexOf(item.id) >= 0 ? 'color: #ddd;' : '')">
								{{item.name}}
							</text>
                        </view>
                    </view>
                </scroll-view>
                <view class="goods_num1">
                    <text>购买数量</text>
                    <view class="uni-numbox">
                        <view class="uni-numbox-minus" :class="disableSubtract ? '' : 'uni-numbox-disabled'"
                            @click="_calcValue('subtract')">-</view>
                        <input class="uni-numbox-value" type="number" :value="inputValue" disabled="true">
                        <view class="uni-numbox-plus" :class="disableAdd ? '' : 'uni-numbox-disabled'"
                            @click="_calcValue('add')">+</view>
                    </view>
                </view>
                <view class="newBtn" :style="'height:' + bottomHeight + 'rpx;width:100%;'" v-if="isBuyer">
                    <view class="pay" @click="subSel('addOrder')" style="background: #eb5938;width:100%;">立即购买</view>
                </view>
				
				<view v-else  class="goods_bot" :style="'background:#999;color:#fff;height:' + bottomHeight + 'rpx;'">已售馨</view>
            </view>
        </uni-popup>
    </view>
</template>


<script>
    var _self;
    import serve from '../../static/request.js';
    import common from '../../static/jump.js';
    import ShareIndex from '../../static/share.js';
    import {Base64} from '../../static/base64.min.js';
    export default {
        mixins: [ShareIndex],
        data() {
            return {
                mode: 'round',
                current: 0,
                dotsStyles: {
                    backgroundColor: 'rgba(255,255,255,0.3)',
                    selectedBackgroundColor: '#FFC600',
                    selectedBorder: '1px rgba(255,198,0,1) solid',
                    border: '1px rgba(255,255,255,0.3) solid',
                    selectedBorder: '1px rgba(255,198,0,1) solid'
                }, //轮播图样式配置
                reductionRemark: '',
                id: 0,
                storeType: 1,
                parentKey: '',
                info: {
                    id: 0,
                    name: '商品名称',
                    cate_name: '',
                    brand_name: '',
                    series_name: '',
                    memberRole: 0,
                    minPrice: 0,
                    maxPrice: 0,
                    marketMinPrice: 0,
                    marketMaxPrice: 0,
                    sales: 0,
                    stock: 0,
                    fee: '包邮',
                    reductionName: '',
                    covers: []
                },
                cartNum: 0,
                selAttr: {
                    id: 0,
                    name: '',
                    picture: '',
                    price: '',
                    marketPrice: 0,
                    pettyRatio: 0,
                    pettyCash: 0,
                    stock: '',
                    min: 1,
                },
                noStockList: [],
                seriesList: [],
                inputValue: 0,
                disableSubtract: true,
                disableAdd: true,
				isBuyer : true,
                isSwitch : false,
                imgList: [],
                bottomHeight: 110,
				isMark: false,
                /* 底部按钮高度，避免iPhonex导航黑条 */
            }
        },
        methods: {
            change(e) {
                this.current = e.detail.current;
            },
            numFilter (value) {
            	// 截取当前数据到小数点后三位
            	let tempVal = parseFloat(value).toFixed(3)
            	let realVal = tempVal.substring(0, tempVal.length - 1)
            	return realVal
            },
            _calcValue(type) {
                if (this.selAttr.id == 0) {
                    uni.showToast({
                        title: '请选择产品规格',
                        icon: 'none'
                    });
                    return;
                }
                const scale = this.selAttr.min;
                let value = this.inputValue;
                let step = this.selAttr.min;
                if (type === 'subtract') {
                    value -= step
                } else if (type === 'add') {
                    value = parseInt(Number(value) + Number(step))
                }
                if (value < this.selAttr.min || value > this.selAttr.stock) {
                    return
                }
                if (value == this.selAttr.min) {
                    this.disableSubtract = false;
                }
                if (value == this.selAttr.stock) {
                    this.disableAdd = false;
                }
                this.inputValue = value;
                this.jsAttrMoeny();
            },
            editSubType(subType) {
                this.subType = subType;
                this.open(0);
            },
            open(type) {
                console.info(type);
				if(type == 0) {
					this.$refs.popup.open();
				}
				if(type == 1) {
					this.selAttrFun(0);
				}
                this.jsAttrMoeny();
            },
            close() {
				this.$refs.popup.close();
            },
            getInfo() {
                serve.request({
                    url: '/store/one/view',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        id: this.id,
                    },
                    v: '/v3'
                }).then(res => {
                    if (res.code != 200) {
                        uni.showToast({
                            title: res.message,
                            icon: 'none',
                            success: function() {
                                setTimeout(function() {
                                    common.jump('batchList')
                                }, 2000)
                            }
                        });
                        return;
                    }
                    this.info = res.data;
                    this.info.intro = Base64.decode(res.data.intro).replace(/\<img/gi, '<img style="max-width:100%;height:auto;vertical-align:top;outline-width:0px;" ');
                    if (this.info.sku.length > 0) {
                        this.info.sku.forEach((i, k) => {
                            if (i.stock * 1 > 0 && this.selAttr.id == 0) {
                                this.selAttr = i;
                                this.inputValue = this.selAttr.min;
								this.isBuyer = true;
                            }
                            if (i.stock * 1 <= 0) {
                                this.noStockList.push(i.id);
                            }
                        });
						if(this.selAttr.id == 0) {
							this.selAttr = JSON.parse(JSON.stringify(this.info.sku[0]));
							this.selAttr.id = 0;
							this.isBuyer = false;
						}
                    }
                });
				
            },
            selAttrFun(index) {
                let item = this.info.sku[index];
                if (this.noStockList.indexOf(item.id) >= 0) {
                    return;
                }
                this.selAttr = item;
                this.jsAttrMoeny();
            },
            jsAttrMoeny() {
                if(this.inputValue == 1) {
                    this.selAttr.totalMoney = this.selAttr.userPriceInfo.one;
                    this.selAttr.nowBenefits = this.selAttr.benefits.one;
                    this.selAttr.nowSubsidy = this.selAttr.subsidy.one;
                } else if (this.inputValue == 2) {
                    this.selAttr.totalMoney = Number(this.selAttr.userPriceInfo.one) + Number(this.selAttr.userPriceInfo.two);
                    this.selAttr.nowBenefits = Number(this.selAttr.benefits.one) + Number(this.selAttr.benefits.two);
                    this.selAttr.nowSubsidy = Number(this.selAttr.subsidy.one) + Number(this.selAttr.subsidy.two);
                } else if (this.inputValue == 3) {
                    this.selAttr.totalMoney = Number(this.selAttr.userPriceInfo.one) + Number(this.selAttr.userPriceInfo.two) + Number(this.selAttr.userPriceInfo.three);
                    this.selAttr.nowBenefits = Number(this.selAttr.benefits.one) + Number(this.selAttr.benefits.two) + Number(this.selAttr.benefits.three);
                    this.selAttr.nowSubsidy = Number(this.selAttr.subsidy.one) + Number(this.selAttr.subsidy.two) + Number(this.selAttr.subsidy.three);
                } else {
                    let bs = Math.floor(this.inputValue / 3);
                    let ys = this.inputValue % 3;
                    let tm1 = Number(this.selAttr.userPriceInfo.one);
                    let tm2 = Number(this.selAttr.userPriceInfo.one) + Number(this.selAttr.userPriceInfo.two);
                    let tm3 = Number(this.selAttr.userPriceInfo.one) + Number(this.selAttr.userPriceInfo.two) + Number(this.selAttr.userPriceInfo.three);
                    let tb1 = Number(this.selAttr.benefits.one);
                    let tb2 = Number(this.selAttr.benefits.one) + Number(this.selAttr.benefits.two);
                    let tb3 = Number(this.selAttr.benefits.one) + Number(this.selAttr.benefits.two) + Number(this.selAttr.benefits.three);
                    let sb1 = Number(this.selAttr.subsidy.one);
                    let sb2 = Number(this.selAttr.subsidy.one) + Number(this.selAttr.subsidy.two);
                    let sb3 = Number(this.selAttr.subsidy.one) + Number(this.selAttr.subsidy.two) + Number(this.selAttr.subsidy.three);
                    this.selAttr.totalMoney = tm3 * bs + (ys == 1 ? tm1 : ys == 2 ? tm2 : 0);
                    this.selAttr.nowBenefits = tb3 * bs + (ys == 1 ? tb1 : ys == 2 ? tb2 : 0);
                    this.selAttr.nowSubsidy = sb3 * bs + (ys == 1 ? sb1 : ys == 2 ? sb2 : 0);
                }
                this.selAttr.totalMoney = this.numFilter(this.selAttr.totalMoney);
                this.selAttr.nowBenefits = this.numFilter(this.selAttr.nowBenefits);
                this.selAttr.nowSubsidy = this.numFilter(this.selAttr.nowSubsidy);
                
                console.info(this.selAttr.totalMoney);
                this.$forceUpdate();
            },
            subSel(tempType = '') {
                if (this.selAttr.id == 0) {
                    uni.showToast({
                        title: '请选择产品规格',
                        icon: 'none'
                    });
                    return;
                }
                if (uni.getStorageSync('access-token') == '') {
                    common.jump('login');
                    return;
                }
                if (tempType == 'addCart') {
                    this.addCart();
                } else if (tempType == 'addOrder') {
                    this.jump('addOrder', 'type=buy_now&product_id=' + this.id + '&sku_id=' + this.selAttr.id + '&num=' + this.inputValue+'&storeType='+this.storeType);
                }
            },
            
            jump(jump_type, jump_link) {
                common.jump(jump_type, jump_link);
            }
        },
        onLoad(options) {
            if (uni.getSystemInfoSync().safeAreaInsets.top > 20) {
                this.bottomHeight = 178;
            }
            this.id = options.id || 0;
            this.storeType = 21;
            if (this.id == 0) {
                uni.showToast({
                    title: "错误的访问方式",
                    icon: 'none',
                    success() {
                        setTimeout(function() {
                            common.jump('return_one')
                        }, 2000)
                    }
                });
            }
            this.getInfo();
        },
        onPullDownRefresh() {
            this.getInfo();
        }
    }
</script>

<style scoped lang="scss">
    .detail {
        padding-bottom: 120upx;

        .pay_type {
            position: relative;
            width: 100%;
            background: #FFFFFF;

            // padding-bottom: 140upx;
            .close {
                position: absolute;
                width: 32upx;
                height: 32upx;
                right: 40upx;
                top: 45upx;
            }

            .title {
                width: 100%;
                text-align: center;
                height: 100upx;
                line-height: 100upx;
                font-size: 32upx;
                border-bottom: 1upx rgba(251, 251, 253, 1) solid;
            }

            .paypir {
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                padding: 50upx 0upx 20upx;
                font-size: 26upx;

                text:last-child {
                    color: rgba(255, 200, 10, 1);
                    font-size: 32upx;
                    font-weight: bold;
                    margin-top: 10upx;
                }
            }

            .line2 {
                width: 100%;
                box-sizing: border-box;
                padding: 30upx;
                display: flex;
                justify-content: space-between;
                font-size: 28upx;
                border-bottom: 1upx rgba(251, 251, 253, 1) solid;

                image {
                    width: 40upx;
                    height: 40upx;
                }
            }

            .pay_bot {
                width: 100%;
                position: fixed;
                left: 0;
                bottom: 0upx;
                height: 100upx;
                background: rgba(255, 200, 10, 1);
                color: #fff;
                font-size: 32upx;
                line-height: 100upx;
                text-align: center;
                border-radius: 0;

                &::after {
                    border: none;
                }
            }
        }

        .popup {
            position: relative;
            // padding-bottom: 100upx;
            width: 100%;
            background: #FFFFFF;

            .close {
                position: absolute;
                width: 50rpx;
                height: 50rpx;
                top: 20rpx;
                right: 20rpx;
            }

            .goods_info {
                display: flex;
                padding: 20upx 30upx;
                box-sizing: border-box;
                width: 100%;
                border-bottom: 2rpx solid #ccc;
                image {
                    width: 170upx;
                    height: 170upx
                }

                .right {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    margin-left: 18upx;
                    .goods_price {
                        color: #5f5b5b;
                        font-size: 34upx;
                    }
                    .active {
                        color: rgba(255, 200, 10, 1);
                        font-size: 40upx;
                    }
                    .npm {
                        color: #fc0107;
                        font-size: 34upx;
                    }
                }
            }
            
            
            .goods_num {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                font-size: 32rpx;
                color: #999999;
                padding: 20rpx;
                border-bottom: 2rpx solid #ccc;
                justify-content: space-between;
            }
            .czType {
                margin-right: 10rpx;
                text-align: center;
                border: 1px solid #ffc80a;
                border-radius: 15%;
                padding: 8rpx 10rpx;
            }
            .goods_size {
                padding: 10rpx 10rpx 0 10rpx;
                box-sizing: border-box;

                .title {
                    font-size: 32upx;
                    margin-left: 13upx;
                }

                .size_item {
                    display: flex;
                    justify-content: flex-start;
                    flex-direction: row;
                    flex-wrap: wrap;
                    padding: 15rpx 0rpx;
                    font-size: 32rpx;
                    text{
                        min-width: 120rpx;
                        text-align: center;
                        padding: 20rpx;
                        border-radius: 20rpx;
                        margin: 10rpx 20rpx;
                    }
                    .sel {
                        color: #FFFFFF;
                        background: #ffc80a;
                    }

                    .nosel {
                        color: rgba(57, 72, 107, 0.8);
                        background: rgba(245, 245, 245, 1);
                    }
                }

                .series_item {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    padding: 15upx 10upx;
                    font-size: 32upx;
                    border: 1upx solid #ccc;
                    margin: 10upx;
                    border-radius: 20upx;

                    .left_item {
                        width: 100upx;

                        image {
                            width: 100upx;
                            height: 100upx;
                        }
                    }

                    .right_item {
                        width: calc(100% - 120upx);
                        margin-left: 10upx;

                        .title {
                            font-size: 32upx;
                            max-height: 90upx;
                            word-break: break-all;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }

                        .price {
                            text-align: right;
                        }
                    }
                }
            }

            .goods_num1 {
                padding: 0rpx 30rpx 20rpx 30rpx;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                justify-content: space-between;
                font-size: 32upx;
                .uni-numbox {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    height: 64upx;
                    border: 1upx solid rgba(60, 72, 104, 0.1);
                    border-radius: 32upx;
                    overflow: hidden;
                }

                .uni-numbox-minus,
                .uni-numbox-plus {
                    margin: 0;
                    background-color: #f9f9f9;
                    width: 100upx;
                    height: 100%;
                    line-height: 64upx;
                    text-align: center;
                    color: #555555;
                }

                .uni-numbox-minus {
                    // border: 2upx solid #cccccc;  
                    // border-right: none;  
                    // border-top-left-radius: 6upx;  
                    // border-bottom-left-radius: 6upx;  
                }

                .uni-numbox-plus {
                    // border: 2upx solid #cccccc;  
                    // border-left: none;  
                    // border-top-right-radius: 6upx;  
                    // border-bottom-right-radius: 6upx;  
                }

                .uni-numbox-value {
                    // border: 1upx solid #cccccc;  
                    background-color: #ffffff;
                    width: 100upx;
                    height: 100%;
                    border-right: 1upx rgba(60, 72, 104, 0.06) solid;
                    border-left: 1upx rgba(60, 72, 104, 0.06) solid;
                    text-align: center;
                }

                .uni-numbox-disabled {
                    color: #c0c0c0;
                }
                .uni-numbox-activity {
                    width: 100%;
                    text-align: right;
                    margin-top: 10rpx;
                }
            }

            .goods_bot {
                // position: fixed;
                bottom: 0upx;
                width: 100%;
                height: 100upx;
                line-height: 100upx;
                text-align: center;
                font-size: 32upx;
                color: #FFFFFF;
                background: rgba(251, 202, 63, 1);
            }
        }

        .bottom {
            position: fixed;
            justify-content: space-between;
            align-items: center;
            bottom: 0upx;
            height: 100upx;
            display: flex;
            width: 100%;
            background: #FFFFFF;

            .car {
                margin-left: 30upx;
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 20upx;

                image {
                    width: 44upx;
                }

                .carnum {
                    position: absolute;
                    right: 0upx;
                    width: 30upx;
                    height: 30upx;
                    line-height: 30upx;
                    text-align: center;
                    color: #FFFFFF;
                    font-size: 18upx;
                    background: rgba(235, 89, 56, 1);
                    border-radius: 50%;
                }
            }

            .nocollect {
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 20upx;

                image {
                    width: 44upx;
                    margin-bottom: 5upx;
                }
            }

            .collect {
                color: #FFC600;
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 20upx;

                image {
                    width: 44upx;
                    margin-bottom: 5upx;
                }
            }

            .right {
                display: flex;

                .add {
                    width: 236upx;
                    height: 100upx;
                    line-height: 100upx;
                    font-size: 32upx;
                    color: rgba(255, 255, 255, 1);
                    text-align: center;
                    background: rgba(255, 200, 10, 1);
                }

                .pay {
                    width: 236upx;
                    height: 100upx;
                    line-height: 100upx;
                    font-size: 32upx;
                    color: rgba(255, 255, 255, 1);
                    text-align: center;
                    background: #EB5938;
                }
                
                .selling{
                    width: 472upx;
                    height: 100upx;
                    line-height: 100upx;
                    font-size: 32upx;
                    color: rgba(255, 255, 255, 1);
                    text-align: center;
                    background: #999;
                }
            }
        }

        .swiper-box {
            width: 100%;
            height: 750upx;

            .swiper-item {
                width: 100%;

                image {
                    width: 100%;
                    height: 750upx;
                }
            }
        }

        .info {
            box-sizing: border-box;
            padding: 30rpx 10rpx 0 10rpx;
            border: 8upx solid #cac5c5;
            border-radius: 20upx;
            
            .top {
                border-bottom: 1upx rgba(57, 72, 107, 0.08) solid;
                position: relative;

                .pic {
                    display: flex;
                    align-items: center;
                    font-size: 20upx;
                    align-items: center;

                    text:nth-child(1) {
                        font-size: 40upx;
                        color: #FFBC00;
                        margin-right: 10upx;
                    }

                    text:nth-child(2) {
                        font-size: 24upx;
                        color: #5f5b5b;
                        margin-left: 30upx;
                        text-decoration: line-through;
                    }
                }

                .title {
                    padding: 40upx 20upx 0;

                    view {
                        margin-bottom: 20upx;
                        color: #999;
                    }

                    view:first-child {
                        font-size: 32upx;
                        font-weight: bold;
                        color: #000000;
                    }

                    .state {
                        padding: 5upx 8upx;
                        text-align: center;
                        color: #FFFFFF;
                        font-size: 32upx;
                        border-radius: 2upx;
                        margin-right: 10upx;
                    }
                }

                .share {
                    position: absolute;
                    // display: flex;
                    right: 0upx;
                    top: -20upx;
                    align-items: center;
                    font-size: 28upx;
                    border: none;
                    background: white;
                    display: flex;
                    align-items: center;
                    border: none;
                    background: #FFFFFF;

                    image {
                        width: 32upx;
                        height: 32upx;
                        margin-right: 10upx;
                    }
                }
            }
            
            .num {
                display: flex;
                justify-content: space-between;
                font-size: 34upx;
                padding: 20rpx;
            }
            .num_1{
                font-size: 38upx;
                font-weight: 600;
                color: #ff003f;
            }
            .num_2{
                font-size: 38upx;
                font-weight: 600;
                color: #1286e2;
            }
        }

        .line {
            display: flex;
            padding: 47upx 31upx;
            justify-content: space-between;
            align-items: center;
            border-bottom: 16upx #FBFBFD solid;

            .left {
                display: flex;
                font-size: 28upx;
                align-items: center;

                text:last-child {
                    margin-left: 30upx;
                    color: rgba(57, 72, 107, 0.3);
                }
            }

            .right {
                position: relative;
                font-size: 28upx;
                color: rgba(57, 72, 107, 0.5);
                padding-right: 23upx;
            }

            .right::before {
                position: absolute;
                right: 0upx;
                top: -2upx;
                content: '';
                border: 1upx solid #CCCCCC;
                border-width: 0 1upx 1upx 0;
                padding: 6upx;
                transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
            }
        }

        .line1 {
            display: flex;
            padding: 47upx 31upx 0upx;
            justify-content: space-between;
            align-items: center;

            .left {
                display: flex;
                font-size: 28upx;
                align-items: center;

                text:last-child {
                    margin-left: 10upx;
                }
            }

            .right {
                position: relative;
                font-size: 24upx;
                color: rgba(57, 72, 107, 0.5);
                padding-right: 23upx;
            }

            .right::before {
                position: absolute;
                right: 0upx;
                top: 10upx;
                content: '';
                border: 1upx solid #CCCCCC;
                border-width: 0 1upx 1upx 0;
                padding: 6upx;
                transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
            }
        }

		.columb {
			display: flex;
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 1rpx solid #eee;
			.title {
				width: 50%;
				text-align: center;
			}
		}
		.markTitle {
			position: fixed;
			top: 0;
			z-index: 9;
			background: #fff;
			width: 100%;
			padding-top: 80rpx;
		}
		
        .content {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            padding: 20upx 10upx;
            border-bottom: 16upx rgba(251, 251, 253, 0.8) solid;

            .details {
                font-size: 0upx;
                line-height: 45upx;

                ::v-deep {

                    img,
                    p,
                    span {
                        width: 100%;
                    }
                }
            }

            // .details >>> img,p,span {
            //   width: 100%;
            // }

            .content_title {
                position: relative;
                margin-left: 20rpx;
                font-size: 32rpx;
                padding: 10rpx 20rpx;
                text-align: left;
                height: 24rpx;
                line-height: 24rpx;
            }

            .content_title::before {
                content: '';
                position: absolute;
                left: 0;
                top: 10upx;
                width: 6upx;
                height: 24upx;
                background: rgba(255, 198, 0, 1);
                border-radius: 2upx;
            }


        }
		
		
		.titleA {
		    width: 100%;
			padding: 10rpx 0 20rpx 20rpx;
		    font-size: 42rpx;
		    color: #ffc80a;
		    text-align: center;
		}
		.mode_5 {
		    display: flex;
		    box-sizing: border-box;
		    flex-wrap: wrap;
		    width: 100%;
		    .titleInfo{
		        width: 100%;
				padding: 10rpx 0 20rpx 20rpx;
		    }
		    .goods5 {
		        width: 44.5%;
		        padding-bottom: 30rpx;
		        border: 6rpx solid #eaeaea;
		        margin-left: 10rpx;
		        padding: 10rpx 4rpx;
		        text-align: center;
		        border-radius: 10rpx;
		        image {
		            width: 200upx;
		            height: 200upx;
		            border: 1rpx solid #eee;
		            border-radius: 2%;
		        }
		        .line_name{
		            font-size:30upx;
		            line-height: 50upx;
		            color: #333;
		            text-overflow: -o-ellipsis-lastline;
		            overflow: hidden;
		            text-overflow: ellipsis;
		            display: -webkit-box;
		            -webkit-line-clamp: 2;
		            -webkit-box-orient: vertical;
		        }
		    }
		}

        .comment {
            display: flex;
            box-sizing: border-box;
            padding: 50upx 30upx;
            border-bottom: 1upx #EBECF0 solid;

            .left {
                image {
                    width: 60upx;
                    height: 60upx;
                    border-radius: 50%;
                }
            }

            .right {
                margin-left: 13upx;
                width: 617upx;

                .name {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .txt {
                        display: flex;
                        align-items: center;

                        text:nth-child(1) {
                            font-size: 28upx;
                            font-weight: bold;
                            color: #333333;
                        }

                        text:nth-child(2) {
                            color: #999999;
                            font-size: 20upx;
                            margin-left: 25upx;
                        }
                    }

                    .txt1 {
                        color: #EB5938;
                        font-size: 28upx;
                    }
                }

                .txt2 {
                    font-size: 28upx;
                    color: #666666;
                    margin-top: 30upx;
                }

                .comment_img {
                    display: flex;

                    image:first-child {
                        margin-left: 0;
                    }

                    image {
                        width: 190upx;
                        height: 168upx;
                        margin-top: 30upx;
                        margin-left: 22upx;
                    }
                }

                .txt3 {
                    margin-top: 30upx;
                    width: 614upx;
                    box-sizing: border-box;
                    background: rgba(240, 240, 240, 1);
                    padding: 23upx 20upx 29upx;
                    font-size: 28upx;
                    color: #999999;

                    text:first-child {
                        font-weight: bold;
                    }
                }
            }
        }

        .nocomment {
            font-size: 28upx;
            color: rgba(60, 72, 104, 0.5);
            width: 100%;
            padding: 87upx 0upx;
            text-align: center;
        }

        .content1 {
            box-sizing: border-box;
            width: 100%;
            padding: 18upx 30upx 18upx;
            border-bottom: 16upx #FBFBFD solid;

            .title {
                position: relative;
                width: 130upx;
                font-size: 24upx;
                text-align: center;
                height: 24upx;
                line-height: 24upx;
            }

            .title::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 6upx;
                height: 24upx;
                background: rgba(255, 198, 0, 1);
                border-radius: 2upx;
            }

            .list {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                padding: 30upx 0upx 0upx;

                .list_item {
                    width: 330upx;
                    padding-bottom: 30upx;

                    image {
                        width: 330upx;
                        height: 340upx;
                        border-radius: 3%;
                    }

                    .item_text {
                        margin-top: 30upx;
                        font-size: 32upx;
                        font-weight: bold;
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }

                    .item_text1 {
                        font-size: 32upx;
                        color: #FFC600;
                    }
                }
            }
        }

        .heng {
            width: 100%;
            height: 20upx;
            background: #F7F7F7;
        }

        .newBtn {
            display: flex;

            view {
                // position: fixed;
                bottom: 0upx;
                width: 50%;
                height: 100upx;
                line-height: 100upx;
                text-align: center;
                font-size: 32upx;
                color: #FFFFFF;
                background: rgba(251, 202, 63, 1);
            }
        }

        .con-img {
            width: 64upx;
            height: 64upx;
        }
    }
	.medalInfo {
	    width: 98vw;
	    max-height: 90vh;
	    min-height: 30vh;
	    overflow: hidden;
	    z-index: 200;
		.popbox {
		    max-height: 900upx;
		    padding: 20upx;
		    overflow: hidden;
		    position: relative;
		    border-radius: 20upx;
		    background: #fff;
		}
		.close {
		    position: absolute;
		    width: 30upx;
		    height: 30upx;
		    right: 50upx;
		    top: 30upx;
		    z-index: 666;
		}
		.title {
		    width: 100%;
		    height: 60upx;
		    line-height: 60upx;
		    font-size: 32upx;
			text-align: center;
		    border-bottom: 1rpx dashed #ccc;
		}
		.activityInfo {
			font-size: 36rpx;
		}
		.activityTitle {
			display: flex;
			padding: 20rpx;
		}
	}
</style>
